<template>
  <div style="height: 240px">
    <ChartView ref="chartViewRef"></ChartView>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
const chartViewRef = ref()

const seriesData = [120, 200, 150, 79, 70, 110, 130]
const option = {
  legend: {
    data: [
      {
        name: '产量',
        icon: 'roundRect',
        itemStyle: {
          color: '#2f4554',
        },
      },
      {
        name: '产量1',
        icon: 'roundRect',
        itemStyle: {
          color: '#c23531',
        },
      },
    ],
  },
  tooltip: {},
  /**
   * x坐标轴配置
   */
  xAxis: {
    /**
     * 坐标轴类型
     * 'value' 数值轴，适用于连续数据。
     * 'category' 类目轴，适用于离散的类目数据。
     * 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
     * 'log' 对数轴。适用于对数数据。对数轴下的堆积柱状图或堆积折线图可能带来很大的视觉误差，并且在一定情况下可能存在非预期效果，应避免使用。
     */
    type: 'category',
    /**
     * x轴数据
     */
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  /**
   * y坐标轴配置
   */
  yAxis: {
    type: 'value',
  },
  /**
   * 图表配置
   */
  series: [
    {
      /**
       * 图表类型
       */
      type: 'bar',
      name: '产量',
      /**
       * 图表数据
       */
      // data: [120, 200, 150, 0, 0, 110, 130],
      data: seriesData.map(item => (item < 80 ? 0 : item)),
      label: {
        show: true, //开启显示
        position: 'top', //在上方显示
        formatter: function (params) {
          console.log(params)
          if (params.value === 0) {
            return ''
          } else {
            return `${params.value}`
          }
        },
      },
      itemStyle: {
        //这里是重点
        color: function (params) {
          //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
          // var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622']
          if (params.value < 80) {
            return '#c23531'
          } else {
            return '#2f4554'
          }
        },
      },
    },
    {
      /**
       * 图表类型
       */
      type: 'bar',
      name: '产量1',
      /**
       * 图表数据
       */
      // data: [0, 0, 0, 79, 70, 0, 0],
      data: seriesData.map(item => (item < 80 ? item : 0)),
      barGap: '-100%',
      label: {
        show: true, //开启显示
        position: 'top', //在上方显示
        formatter: function (params) {
          console.log(params)
          if (params.value === 0) {
            return ''
          } else {
            return `${params.value}`
          }
        },
      },
      itemStyle: {
        //这里是重点
        color: function (params) {
          //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
          // var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622']
          if (params.value < 80) {
            return '#c23531'
          } else {
            return '#2f4554'
          }
        },
      },
    },
  ],
}

onMounted(() => {
  chartViewRef.value.setOption(option)
})
</script>
